<template>
  <p>Sum is: {{ sum }}</p>
  <button @click="increment">increment</button>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue';

  interface State {
    sum: number;
    increment: () => void;
  }

  export default defineComponent({
    name: 'ClickEvent',
    setup: () => {
      const data: State = reactive({
        sum: 0,
        increment: () => {
          data.sum += 1;
        }
      });
      return {
        ...toRefs(data)
      };
    }
  });
</script>

<style scoped></style>
